<template>
	<div class="warp">
		<div class="top">顶部内容</div>
		<view style="height: 500rpx"></view>
		<div class="mainleft">
			<div class="" style="background: #fff; height: 60px">待补充内容 栏目。。搜索，，待跟进。XXX</div>
			<div class="dp" v-for="i in 10">
				<div class="mainwarp">
					<div class="list list1">
						<van-sticky :offset-top="200">
							<view style="background-color: #fff">
								<van-button type="default" size="small" style="z-index: 1000000">
									童年时光{{ i }}
									<text class="jso">+</text>
								</van-button>
							</view>
						</van-sticky>
					</div>
					<div class="list list2" @click="ck(i)">
						<van-sticky :offset-top="200">
							<van-button type="default" size="small" style="background-color: #fff">
								列表页{{ i }}
								<text class="jso">+</text>
							</van-button>
						</van-sticky>
					</div>
					<div class="list list3">
						<van-sticky :offset-top="200">
							<van-button type="default" size="small" style="background-color: #fff">
								位置{{ i }}
								<text class="jso">+</text>
							</van-button>
						</van-sticky>
					</div>
				</div>
				<div class="main-c"></div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import lan from '/components/text/lan';

// element.addEventListener('click', function (i) {
// 	console.log(i);
// });

// 	element.dispatchEvent(event);
// }
// element.addEventListener('mousedown', function () {
// 	simulateClick();
// });
function ck(i) {
	console.log(i);
}

function simulateClick(element) {
	const event = new MouseEvent('click', {
		view: window,
		bubbles: true,
		cancelable: true
	});

	element.dispatchEvent(event);
}

onMounted(() => {
	const elements = document.getElementsByClassName('list1');
	for (let i = 0; i < elements.length; i++) {
		elements[i].addEventListener('click', function (i) {
			// 处理点击事件的逻辑
			console.log('元素被点击了！', i);
		});
		elements[i].addEventListener('mousedown', function () {
			simulateClick(elements[i]);
		});
	}
});
</script>

<style lang="scss">
html {
	width: 100%;
	padding: 0;
	margin: 0;
}
body {
	background-color: #f96;
	width: 100%;
	padding: 0;
	margin: 0;
	font-size: 14px;
}
.warp {
	background: #666;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 111;
}
.top {
	width: 100%;
	height: 120px;
	background: #f96;
	border-bottom: 2rpx solid #e8e8e8;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	z-index: 1;
}
.mainleft {
	width: calc(100% - 440px);
	background: #f4f4f4;
	position: fixed;
	left: 0;
	top: 120px;
	bottom: 0;
	overflow-y: scroll;
	padding: 20px;
	box-sizing: border-box;
}
.dp {
	width: 100%;
	min-height: 150px;
	background: #fff;
	margin-bottom: 10px;
	float: left;
	border-radius: 10px;
	// background: #fff url(bgy.png) 0px 0px repeat-y;
	border: 1px solid #20b6ff;
}
.mainwarp {
	width: 100%;
	float: left;
	box-sizing: border-box;
}
.list {
	width: 100%;
	height: 50px;
	float: left;
	line-height: 50px;
	border-bottom: 1px solid #20b6ff;
}
.list1 {
	// text-indent: 20px;
	margin-left: 20rpx;
}
.list2 {
	// text-indent: 220px;
	margin-left: 220rpx;
	border-top: 1px solid #20b6ff;
}
.list3 {
	text-indent: 420px;
	border-top: 1px solid #20b6ff;
}
.mainwarp:first-child .list3 {
	border-top: 0px;
}
.mainwarp:first-child .list2 {
	border-top: 0px;
}

.main-c {
	width: calc(100% - 600px);
	background: #fff;
	border-left: 1px solid #20b6ff;
	border-top: 1px solid #20b6ff;
	float: right;
	min-height: 50px;
	margin-top: -51px;
	box-sizing: border-box;
	border-radius: 0 0 10px 10px;
	height: 900rpx;
}
.content {
	width: 100%;
	min-height: 50px;
	line-height: 50px;

	box-sizing: border-box;
	padding: 10px 20px;
	float: left;
}
.won {
	width: 100%;
	float: left;
	position: relative;
}
.weiti {
	width: 100%;
	background: #f9f9f9;
	box-sizing: border-box;
	padding: 10px;
	margin-bottom: 10px;
	float: left;
	position: relative;
}
.rwimg {
	width: 60px;
	height: 60px;
	display: block;
	float: left;
	margin-right: 20px;
}
.rlwimg {
	width: 60px;
	height: 60px;
	display: block;
	float: right;
	margin: 0 20px;
}
.shuw {
	display: block;
	height: 30px;
	line-height: 30px;
	float: left;
	width: calc(100% - 80px);
}
.rlshuw {
	display: block;
	height: 30px;
	line-height: 30px;
	float: right;
	width: calc(100% - 100px);
}

.huida {
	width: 100%;
	text-align: right;
	background: #f9f9f9;
	box-sizing: border-box;
	padding: 10px;
	float: left;
	position: relative;
}
.hufu {
	width: calc(100% - 100px);
	line-height: 40px;
	float: right;
}
.mainright {
	width: 440px;
	background: #20b6ff;
	position: fixed;
	right: 0;
	top: 120px;
	bottom: 0;
	overflow-y: scroll;
	float: right;
}
.msdiv {
	width: 360px;
	float: left;
}
.msul {
	width: 360px;
	float: right;
	background: #20b6ff;
	height: 50px;
	list-style-type: none;
	margin: 0;
	position: relative;
}
.psa {
	position: absolute;
	bottom: 20px;
	right: 20px;
}
.juantai {
	width: 100%;
	height: 60px;
	position: relative;
}
div {
	box-sizing: border-box;
}
.jso {
	padding: 0px 6px;
	background: #20b6ff;
	border-radius: 6px;
	color: #fff;
	height: 30px;
	line-height: 30px;
	margin-left: 10px;
}
.kkw {
	padding: 0px 6px;
	background: #20b6ff;
	border-radius: 6px;
	color: #fff;
	height: 30px;
	line-height: 30px;
	margin-left: 10px;
}
.kkw {
	padding: 4px 12px;
	height: 26px;
	line-height: 26px;
	margin-left: 10px;
}
.dis75 {
	display: none;
}
.ulli {
	width: 100px;
	float: left;
	color: #fff;
	text-align: center;
	height: 50px;
}

@media screen and (max-width: 751px) {
	html,
	body {
		background-color: #20b6ff;
		font-size: calc((100vw / 750) * 100);
	}
	div {
		font-size: 28rpx;
	}
	.top {
		height: 120rpx;
	}

	.mainleft {
		width: 100%;
		top: 120rpx;
		padding: 0;
	}
	.dp {
		width: 100%;
		height: auto;
		min-height: 80rpx;
		background: #20b6ff;
		margin-bottom: 0.1rem;
		float: left;
		background-image: none;
	}
	.mainwarp {
		width: 100%;
		height: 80rpx;
		float: left;
		box-sizing: border-box;
	}
	.list {
		width: 2.4rem;
		height: 80rpx;
		float: left;
		line-height: 80rpx;
		border-bottom: 0.01rem solid #20b6ff;
		color: #fff;
		text-align: center;
	}
	.list2 {
		text-indent: 0;
	}
	.list3 {
		text-indent: 0;
	}
	.jso {
		background: #fff;
		color: #000;
	}
	.main-c {
		width: 100%;
		border: 1px solid #20b6ff;
		float: left;
		min-height: 80rpx;
		margin-top: 0;
	}
	.content {
		min-height: 80rpx;
		line-height: 80rpx;
		padding: 0.2rem;
	}
	.mainright {
		display: none;
	}
	.juantai {
		width: 100%;
		height: 80rpx;
	}
	.weiti {
		border-radius: 20rpx;
		font-size: 24rpx;
	}
	.msdiv {
		width: 500rpx;
		float: left;
	}
	.msul {
		width: 46rpx;
		height: 46rpx;
		padding-left: 0;
		text-align: center;
		line-height: 46rpx;
		color: #fff;
		margin-top: 0.16rem;
	}
	.jso {
		padding: 2rpx 0.1rem;
		border-radius: 6rpx;
		height: 0.2rem;
		line-height: 0.2rem;
		margin-left: 0.1rem;
	}
	.ulli {
		width: 3rem;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
	}
	.dis75 {
		display: block;
	}
	.dis11 {
		display: none;
	}
	.kkw {
		padding: 6rpx 0.1rem;
		border-radius: 6rpx;
		height: 0.4rem;
		line-height: 0.4rem;
		margin-left: 0.1rem;
		background: #20b6ff;
		color: #fff;
	}
	.div-toggle {
		width: 3rem;
		background: red;
		position: absolute;
		top: 30;
		right: 0;
		z-index: 99;
	}
	.hidden {
		display: none;
	}
	.visible {
		display: block;
	}
}
</style>
